// 页面加载完后
window.addEventListener("load", function () {
	// ----------------------------------API分类区----------------------------------
	// 模拟服务器上的传递过来的数据
	const apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// 功能二：API分类动态渲染
	// 1.获取后台数据进行分析
	// 2.拼接HTML结构
	apiTypeData.forEach(function (v) {
		// console.log("每一条数据", v);
		// 3.将拼接好的HTML结构放入指定位置
		// 初级
		// $("#APICate >ul").innerHTML += `
		// <li class=${v.isnew ? "fw-b" : ""} title="${v.keyword}">${v.name}</li>
		// `;
		// 高级
		// $("#APICate >ul").innerHTML += `
		// <li class=${v.isnew && "fw-b"} title="${v.keyword}">${v.name}</li>
		// `;
		// 高级-优化（薪资+5）
		// $("#APICate >ul").innerHTML += `
		// <li ${v.isnew ? "class=fw-b" : ""} title="${v.keyword}">${v.name}</li>
		// `;

		// 方式二 使用JS原生属性和方法的方式
		// 1.创建元素 createElement()
		const liNode = document.createElement("li"); // <li></li>
		// 2.加入对应属性 titile className textContent
		v.isnew && (liNode.className = "fw-b"); // 加类名
		liNode.title = v.keyword; // 加title属性
		liNode.textContent = v.name; // 加文本内容
		// 3.放入指定位置 append()
		$("#APICate >ul").append(liNode);
	});

	/*
	console.log("或", false || 1); // 短路运算符，逻辑或的特性，前面表达式转换后为false时执行后面的表达式
	console.log("与", false && 1); // 逻辑与的特性（ES6+），前面表达式为false时直接return false
    */

	// 功能一：给每个标签增加激活的用户交互
	// 1.获取相关节点
	// $('#APICate >ul li')
	// 2.给标签节点绑定点击事件
	$("#APICate >ul li").forEach(function (v, i) {
		// 默认给第一个元素加上激活样式
		i === 0 && v.classList.add("active");

		// console.log("每个标签>>>", v);
		v.addEventListener("click", function () {
			// 3.点击后排他思想，先移出所有的active
			$("#APICate >ul li").forEach(function (each) {
				each.classList.remove("active"); // 清除active样式
			});

			// 4.给当前的节点加上active
			this.classList.add("active");

			// 功能三：点击标签搜索框联动
			// 1.获取搜索框内对应的节点
			// $("#APICateSearch >strong");
			// $("#APICateSearch >input");
			// 2.点击后将对应内容放在搜索框内，strong对应textContent，input.value对应节点的title
			$("#APICateSearch >strong").textContent = this.textContent;
			$("#APICateSearch >input").value = this.title;
		});
	});

	// --------------------------API卡片区--------------------------
	//API列表区域 模拟服务器返回的数据
	//API列表区域 模拟服务器返回的数据
	const listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		// 第五行
		{
			img: "API_05.jpg",
			name: "短信API服务5",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	/*
	// 1.分析获取的后台数据进行遍历
	listDataArr.forEach(function (v) {
		// console.log("每一条数据>>>", v);
		// 2.拼接为HTML结构
		// 3.将HTML结构放入指定位置
		$("#APIContList").innerHTML += `
		<li class="rel flex-c-c">
			<img src="./imgs/${v.img}" alt="图片已损坏" />
			<p>${v.name}</p>
			<p class=${v.isSpecial ? "fc-red" : "fc-green"} >
			${v.price}</p>
			<a class="abs" href="#">申请数据</a>
			${v.isSpecial ? '<span class="abs"> 企业专用 </span>' : ""}
		</li>
		`;
	});
	*/

	//----------分页器区---------------------
	// 功能一: 分页器激活样式
	// 1.获取相应节点
	// $('#sorter li')
	/*
	$("#sorter li").forEach(function (v) {
		// console.log("this指向>>>", this);
		v.addEventListener("click", function () {
			// console.log("this2指向>>>", this);
			// 2.点击后排他,消除所有的激活样式
			$("#sorter li").forEach(function (each) {
				each.classList.remove("active");
			});
			// 3.给当前选中的节点增加激活样式
			v.classList.add("active");
		});
	});
	*/

	// 功能二: 根据后台数据渲染每个li节点,并绑定激活事件
	// 思路:1.先根据后台数据的长度listDataArr.length渲染出页数 2.绑定事件--事件委派,在事件委派中增加激活样式

	function render(pagination, pageSize) {
		let startIndex = (pagination - 1) * pageSize; // 开始索引
		let endIndex = pagination * pageSize; // 结束索引
		let result = listDataArr.slice(startIndex, endIndex);
		// 排他思想,渲染前先清空选项卡区
		$("#APIContList").innerHTML = "";
		// 3.将数据动态渲染到页面
		result.forEach(function (v) {
			// 3-1.拼接为HMTL结构
			// 3-2.放入指定位置
			$("#APIContList").innerHTML += `
			<li class="rel flex-c-c">
			<img src="./imgs/${v.img}" alt="图片已损坏" />
			<p>${v.name}</p>
			<p class=${v.isSpecial ? "fc-red" : "fc-green"} >
			${v.price}</p>
			<a class="abs" href="#">申请数据</a>
			${v.isSpecial ? '<span class="abs"> 企业专用 </span>' : ""}
			</li>
		  `;
		});
	}

	// 1.动态渲染
	const totalSize = listDataArr.length; // 总条数 即数据的总数量
	const pageSize = 5; // 每页条数 即每页显示的选项卡数量
	const pageNumber = Math.ceil(totalSize / pageSize); // 页数 = 总条数 / 每页条数
	for (let i = 1; i <= pageNumber; i++) {
		// 1.创建li
		const liNode = this.document.createElement("li");
		liNode.textContent = i;
		i === 1 && (liNode.className = "active");
		// 2.将创建的li放入ul中
		$("#sorter").append(liNode);
	}

	render(1, pageSize); // 页码加载时渲染第一页

	// 2.事件委派
	// 2-1.给祖先元素ul绑定事件
	$("#sorter").addEventListener("click", function (event) {
		// 2-2.根据event的target下面的nodeName获取localName进行判断
		// event.target 事件源
		// console.log(event.target.nodeName, event.target.localName);
		if (event.target.nodeName === "LI") {
			// 2-3.点击后增加激活
			// 点击后排他,消除所有的激活样式
			$("#sorter li").forEach(function (each) {
				each.classList.remove("active");
			});
			// 给当前选中的节点增加激活样式
			event.target.classList.add("active");

			// 功能三.点击分页器后动态渲染选项卡区
			// 思路:分页原理arr.slice(开始索引, 结束索引) 包前不包后
			// 页码点击后获取textContent
			/* 页码   数据   开始索引             结束索引
				1     0~4    0(页码-1)*每页条数   页码*每页条数
				2     5~9    5                    页码*每页条数
				3     10~14  10
				4     15~19  
			*/
			/*
			// 1.点击页数
			// 2.去slice数据数组求出这一页需要渲染的数据
			let pagination = Number(event.target.textContent); // 页码
			let startIndex = (pagination - 1) * pageSize; // 开始索引
			let endIndex = pagination * pageSize; // 结束索引
			let result = listDataArr.slice(startIndex, endIndex);
			console.log("当前应该显示的数据>>>", result);

			// 排他思想,渲染前先清空选项卡区
			$("#APIContList").innerHTML = "";

			// 3.将数据动态渲染到页面
			result.forEach(function (v) {
				// 3-1.拼接为HMTL结构
				// 3-2.放入指定位置
				$("#APIContList").innerHTML += `
				<li class="rel flex-c-c">
					<img src="./imgs/${v.img}" alt="图片已损坏" />
					<p>${v.name}</p>
					<p class=${v.isSpecial ? "fc-red" : "fc-green"} >
					${v.price}</p>
					<a class="abs" href="#">申请数据</a>
					${v.isSpecial ? '<span class="abs"> 企业专用 </span>' : ""}
				</li>
				`;
			});
			*/
			render(Number(event.target.textContent), pageSize);
		}
	});

	// 功能四: 给动态渲染出的卡片绑定点击事件
	// 1.给卡片的a标签绑定点击事件
	// 1-1.给a的祖先元素ul绑定事件
	$("#APIContList").addEventListener("click", function (e) {
		// 1-2.反查事件源,根据e.target.nodeName去判断
		if (e.target.nodeName === "A") {
			// 阻止跳转
			e.preventDefault();
			// 2.点击后给个提示去登录(alert('去登录'))
			// alert("去登录");
			// --------------------------登录框区--------------------------
			// 功能一：点击申请数据按钮弹出蒙层，点击蒙层关闭
			// 1.获取相关节点
			// 2.给申请数据按钮绑定点击事件
			// 3.让蒙层显示
			$("#mask").style.display = "block";
			// 禁用滚动条
			document.body.style.overflow = "hidden";
		}
	});

	// 点击蒙层关闭
	$("#mask").addEventListener("click", function (event) {
		// event.target 事件源
		// console.dir(event.target);
		if (event.target.id === "mask") {
			this.style.display = "none";
			document.body.style.overflow = "auto";
		}
	});

	// 功能二：点击tab切换内容
	tabChange({
		tabClassName: "active",
		tabSelector: "#loginModalTab li",
		contSelector: "#loginModal .loginCont",
		contClassName: "on",
	});
});
